<template>
  <q-page padding class="row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <q-list>
        <q-list-header inset>Folders</q-list-header>
        <q-item>
          <q-item-side icon="folder" inverted color="primary" />
          <q-item-main>
            <q-item-tile label>Photos</q-item-tile>
            <q-item-tile sublabel>February 22, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" color="green" />
        </q-item>
        <q-item>
          <q-item-side icon="folder" inverted color="secondary" />
          <q-item-main>
            <q-item-tile label>Movies</q-item-tile>
            <q-item-tile sublabel>March 1st, 2017</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="folder" inverted color="amber" />
          <q-item-main>
            <q-item-tile label>Games</q-item-tile>
            <q-item-tile sublabel>Latest</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item-separator inset />
        <q-list-header inset>Files</q-list-header>
        <q-item>
          <q-item-side icon="assignment" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Expenses spreadsheet</q-item-tile>
            <q-item-tile sublabel>March 2nd, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="place" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Places to visit</q-item-tile>
            <q-item-tile sublabel>February 22, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" color="amber" />
        </q-item>
        <q-item>
          <q-item-side icon="library_music" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>My favorite song</q-item-tile>
            <q-item-tile sublabel>Singing it all day</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="videogame_asset" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Quasar Game</q-item-tile>
            <q-item-tile sublabel>Have fun while building apps</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
      </q-list>

      <q-list class="q-mt-md dark-example" dark>
        <q-list-header inset>Folders</q-list-header>
        <q-item>
          <q-item-side icon="folder" inverted color="primary" />
          <q-item-main>
            <q-item-tile label>Photos</q-item-tile>
            <q-item-tile sublabel>February 22, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" color="green" />
        </q-item>
        <q-item>
          <q-item-side icon="folder" inverted color="secondary" />
          <q-item-main>
            <q-item-tile label>Movies</q-item-tile>
            <q-item-tile sublabel>March 1st, 2017</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="folder" inverted color="amber" />
          <q-item-main>
            <q-item-tile label>Games</q-item-tile>
            <q-item-tile sublabel>Latest</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item-separator inset />
        <q-list-header inset>Files</q-list-header>
        <q-item>
          <q-item-side icon="assignment" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Expenses spreadsheet</q-item-tile>
            <q-item-tile sublabel>March 2nd, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="place" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Places to visit</q-item-tile>
            <q-item-tile sublabel>February 22, 2016</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" color="amber" />
        </q-item>
        <q-item>
          <q-item-side icon="library_music" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>My favorite song</q-item-tile>
            <q-item-tile sublabel>Singing it all day</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
        <q-item>
          <q-item-side icon="videogame_asset" inverted color="grey-6" />
          <q-item-main>
            <q-item-tile label>Quasar Game</q-item-tile>
            <q-item-tile sublabel>Have fun while building apps</q-item-tile>
          </q-item-main>
          <q-item-side right icon="info" />
        </q-item>
      </q-list>
    </div>
  </q-page>
</template>
